<template>
<div class="teams_box">
  <el-breadcrumb separator-class="el-icon-arrow-right" class="teams_main_box">
    <el-breadcrumb-item :to="{ path: '/backIndex/teams' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>我的比赛</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="table_box">
<!--    width: 1001px;-->
    <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="
        margin: 20px auto;"
      >
        <el-table-column
            align="center"
            label="比赛名称">
<!--          width="180"-->
          <template slot-scope="scope">
            <span>{{ scope.row.gameName }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="队名"
            align="center">
<!--          width="180"-->
          <template slot-scope="scope">
            <span>{{ scope.row.groupName }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="队长"
            align="center">
<!--          width="100"-->
          <template slot-scope="scope">
            <el-tag type="success">{{ scope.row.rname }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="指导老师"
            align="center">
<!--          width="100"-->
          <template slot-scope="scope">
            <span v-for="item in scope.row.teacher" :key="item.id" style="margin-left: 10px">{{ item.teachername }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="作品名称"
            align="center">
<!--          width="180"-->
          <template slot-scope="scope">
            <el-tag v-if="scope.row.workName">{{ scope.row.workName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="比赛时间"
            align="center">
<!--          width="180"-->
          <template slot-scope="scope">
            <span>{{ scope.row.beginTime + '~' + scope.row.endTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         align="center">
<!--          width="80"-->
          <template slot-scope="scope">
            <el-button
                class="el-icon-edit"
                type="primary"
                size="medium"
                @click="handleEdit(scope.$index, scope.row)"> 编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
  </div>
</div>
</template>

<script>

export default {
  name: "teams",
  data() {
    return {
      loading: true, //加载
      tableData: [],
      OwnSignup: [], // 先获取自己参加的比赛，没有指导老师和作品信息
      teacher: [], // 通过groupID获取指导老师
      work: {}    // 通过groupID获取作品信息
    }
  },
  methods: {
    handleEdit(index, row) {
      const nowTime = new Date();
      const beginTime = new Date(row.beginTime); // 比赛开始时间
      if(nowTime<beginTime){
        const teacher = JSON.stringify(this.teacher);
        let team = {};
        team.groupID = row.groupID;
        team.work = row.workName;
        team.groupName = row.groupName;
        window.sessionStorage.setItem("nuofp",row.nuofp);//人数限制
        window.sessionStorage.setItem("team",JSON.stringify(team));
        window.sessionStorage.setItem("groupID",row.groupID);
        window.sessionStorage.setItem("teacher",teacher);
        window.sessionStorage.setItem('gameName',row.gameName);
        this.$router.push('/backIndex/editTeam');
      } else {
        this.$alert('比赛时间一开始，不能编辑再队伍！', '比赛已开始！', {
          confirmButtonText: '确定',
        });
      }
    },

  //  通过groupID获取参赛小组信息
    getGroup(data){
      this.tableData.splice(0,this.tableData.length)
      this.$api.getgroups(data.groupID)
        .then(async res =>{
          let tableData = res.data.getInfo;
          tableData.gameID = data.gameID;
          const nuofp = await this.$api.getGamebyId(data.gameID)
          tableData.nuofp = nuofp.data.AdminName.leetcode; //人数限制
          const teachers = await this.$api.getGroupTeacherInfo(tableData.groupID)
            .then(res =>{
              return res.data.getGroupTeacherInfo
            });
            this.teacher = teachers;
          tableData.teacher = teachers;
            const work = await this.$api.getWorkInfo(tableData.groupID)
              .then(res =>{
                return res.data.work;
              });
            this.work = work.title;
          tableData.workName = work.title;
          this.tableData.push(tableData);
        }).catch(err => {
        console.log(err);
      });
    },

  //  获取自己参加的比赛
    getOwnSignup() {
      this.loading = true;
      // 先获取以参与的小组信息
      this.$api.getOwnGroupList()
        .then(res => {
          if(res.success){
            res.data.info.forEach(temp => {
              if(temp !== null){
                this.getGroup(temp);
              }
            });
          }
          setTimeout(()=>{
            this.loading = false;
          },2000);
        })
        .catch(err =>{
          console.log(err);
        })

    },

  },
  mounted() {
    const level = window.sessionStorage.getItem('level');
    if( level === '1'){
      this.getOwnSignup();
    }
  }
}
</script>

<style lang="less" scoped>
.teams_box{
  .teams_main_box{
    margin-bottom: 20px;
  }
  .table_box{
    background-color: #ffff;
    padding: 40px;
    box-shadow: 0 2px 7px rgba(187, 172, 172, 0.49), 0 5px 11px rgba(247, 231, 231, 0.36);
  }
}
</style>
